<template>
  <div class="w-full h-full min-h-0">
    <Scrollbar class="scrollbar" ref="scrollbar" safe-area>
      <ul class="flex flex-col overflow-auto">
        <li v-for="(item, index) in list" :key="index" :class="[
          'flex',
          'flex-row',
          'p-2',
          'items-center',
          'justify-between',
          'rounded',
          'gap-3',
          {
            'flex-row-reverse':
              item['from_id'] == self['from_id'],
          },
        ]">
          <div class="h-full w-12 cursor-pointer">
            <!-- <img v-if="
              item['from_id'] === self['to_id'] &&
              self['to_avatar']
            " class="rounded-full w-full h-12" :src="self['to_avatar']" :alt="item['to_id']" /> -->
            <Robot v-if="item['root_id'] == 1" @click="showAiBt = !showAiBt"
              class=" bg-orange-400 text-[10px] rounded-full w-full h-12 text-white p-1" />
            <div v-else :class="[
              'rounded-full',
              'w-full',
              'h-12 ',
              'bg-[#fb923c]',
              'text-white',
              'text-[18px]',
              'flex',
              'items-center',
              'justify-center',
            ]" @click="showAiBt = !showAiBt">
              {{ item['from_name'].slice(0, 2) }}
            </div>
          </div>
          <div :class="[
            'flex-1',
            'flex',
            'flex-row',
            'justify-between',
            'relative',
            'overflow-hidden',
            {
              'flex-row-reverse':
                item['from_id'] == self['from_id'],
            },
          ]">
            <div :class="[
              'w-full',
              'flex',
              'flex-col',
              'gap-1',
              'items-start',
              {
                'items-end':
                  item['from_id'] == self['from_id'],
              },
            ]">
              <span class="text-gray-600 text-[12px]">
                {{
                  item['msg_time']
                    ? item['msg_time'].slice(5)
                    : ''
                }}
              </span>
              <div :class="[
                'w-full',
                'h-full',
                'flex',
                'items-center',
                'gap-2',
                {
                  'flex-row-reverse':
                    item['from_id'] == self['from_id'],
                },
              ]">
                <span :class="[
                  'text-[15px]',
                  'p-3',
                  'max-w-[72%]',
                  'rounded-lg',
                  {
                    'rounded-tl-none':
                      item['from_id'] !=
                      self['from_id'],
                    'bg-[#ffffff]':
                      item['from_id'] !=
                      self['from_id'],
                    'rounded-tr-none':
                      item['from_id'] ==
                      self['from_id'],
                    'bg-[#95ec69]':
                      item['from_id'] ==
                      self['from_id'] &&
                      item['content'] !==
                      '【卡片消息】' &&
                      item['root_id'] !== 1,
                    'bg-[#5b89fe]':
                      item['from_id'] ==
                      self['from_id'] &&
                      item['root_id'] == 1,
                    'text-[#ffffff]':
                      item['from_id'] ==
                      self['from_id'] &&
                      item['root_id'] == 1,
                  },
                ]" v-html="item['from_id'] == self['from_id']
                  ? cardToHtml(
                    textToEmoji(item['content'])
                  )
                  : textToEmoji(item['content'])
                  " />
                <span v-if="item['from_id'] == self['from_id']" :class="[
                  {
                    'animate-spin': item['status'] == 1,
                    'text-green-500':
                      item['status'] == 1,
                    'text-green-600':
                      item['status'] == 2,
                    'text-red-500':
                      item['status'] == -1,
                  },
                ]">
                  <span v-if="item['status'] == 0" class="text-[12px] text-gray-500">
                    {{ item['status_desc'] }}
                  </span>
                  <LoadingIcon v-else-if="item['status'] == 1" />
                  <FailIcon v-else-if="item['status'] == -1" />
                  <SuccessIcon v-else />
                </span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </Scrollbar>
  </div>
</template>

<script setup lang="ts">
import Scrollbar from '@/components/scrollbar/Scrollbar.vue';
import { type IProps } from './props';
import { textToEmoji, cardToHtml } from '@/utils/render';
import LoadingIcon from '@/components/icon/Loading.vue';
import Robot from '../icon/Robot.vue';
import FailIcon from '../icon/Fail.vue';
import SuccessIcon from '../icon/Success.vue';
import { onMounted, onUpdated, ref, watch } from 'vue';
import { nextTick } from 'vue';

// 接收父亲传的数组
const props = withDefaults(defineProps<IProps>(), {
  list: () => [],
});

const scrollbar = ref<InstanceType<typeof Scrollbar>>();
const showAiBt = defineModel({ type: Boolean, default: false })


defineExpose({
  scrollToBottom() {
    nextTick(() => {
      if (scrollbar.value) {
        // console.log('message调用滚动条方法');
        // console.log(document.querySelector('ul')?.clientHeight);
        scrollbar.value!.scrollToBottom(false);
      }
    });
  },
});


// 监听历史消息，有新消息 滚动条置底
watch(
  () => props.list.length,
  (newValue, oldValue) => {
    if (newValue > oldValue) {
      nextTick(() => {
        if (scrollbar.value) {
          scrollbar.value!.scrollToBottom();
        }
      });
    }
  },
  { deep: true }
);
</script>
